Skip to content

feat(favourites): upgrade command library design and responsiveness#759

Closed
BigSimmo wants to merge 5 commits into
mainfrom
claude/favourites-page-redesign-trqghq
Closed

feat(favourites): upgrade command library design and responsiveness#759
BigSimmo wants to merge 5 commits into
mainfrom
claude/favourites-page-redesign-trqghq

Conversation

@BigSimmo

@BigSimmo BigSimmo commented Jul 17, 2026

Copy link
Copy Markdown
Owner

Summary

Presentation-only redesign of the favourites command library (/favourites) for a cleaner look that adapts across every screen size. No data, retrieval, governance, or routing logic changed.

  • Table: switched to a fixed layout so item titles get the remaining width (no more over-eager truncation) and the Open action stays visible instead of scrolling off-screen at tablet/desktop widths. Added pinned markers, a refined toolbar/header band, and even row heights via reliable single-line clamping.
  • Wide screens: the leading type-icon tile and the secondary Evidence column now appear only at 2xl, and both collapse when the item-workspace panel is open so the three-pane browse list stays readable. Content cap widened on large screens.
  • Small screens: added a horizontally scrollable quick-views rail (All / Source-backed / Pinned / Recently used) and moved the saved-sets carousel above the list, restoring — below lg where the sidebar is hidden — the navigation the desktop sidebar provides.
  • Mobile cards: more compact and scannable with a type icon, pinned marker, and inline set / last-used metadata, while keeping the independent select / open / more-actions controls and ≥44px touch targets.

Files changed: src/components/clinical-dashboard/favourites-command-library-page.tsx, src/components/clinical-dashboard/favourites-library-nav.tsx.

Verification

  • npm run lint — pass
  • npm run typecheck — no errors in changed files (pre-existing test-dep errors in tests/* are unrelated: @testing-library/* / @axe-core/playwright are not installed in this environment)
  • npm run test (focused: site-map, search-command-surface, app-modes) — 30/30 pass
  • Manual browser QA against the running app at 390 / 768 / 1280 / 1600, light + dark, plus programmatic checks matching the affected e2e assertions: mobile card touch targets ≥44px, Select/Open/More actions controls, aria-pressed toggle, item workspace opens on row select at 2xl, active-filter chips on search, zero mobile horizontal overflow, and the mobile centered-search geometry (heading above search, search within the main pane).

UI verification not run: npm run verify:ui / npm run verify:pr-local — the runner's isolated production build type-checks test-setup files that import @testing-library/jest-dom, which is not installed in this environment; covered by the manual + programmatic checks above.

Risk and rollout

  • Risk: low — presentation-only changes to one route's components; no changes to data flow, source-backed classification (isSourceBacked unchanged), retrieval, or governance behavior.
  • Rollback: revert the single commit on this branch to restore the previous favourites layout.
  • Provider or production effects: None.

Clinical Governance Preflight

This change re-lays-out the favourites library visually only; the underlying source-governance logic and conservative behavior are unchanged, so each item below holds by virtue of touching no clinical, data, or governance code path.

  • Source-backed claims still require linked source verification before clinical use
  • No patient-identifiable document workflow was introduced or expanded without explicit governance approval
  • Supabase target remains Clinical KB Database (sjrfecxgysukkwxsowpy)
  • Service-role keys and private document access remain server-only
  • Demo/synthetic content remains clearly separated from real clinical sources
  • Source metadata, review status, and outdated/unknown-source behavior remain conservative
  • Deployment classification/TGA SaMD impact was checked when clinical decision-support behavior changed

Notes

  • Presentation-only; no source-governance, retrieval, or clinical-output behavior changed.

Summary by CodeRabbit

  • New Features

    • Added mobile quick-view controls for filtering favourites by All, Source-backed, and Pinned items.
    • Added item counts and active-state indicators to mobile filters.
    • Improved pinned-item indicators and selection behavior across mobile and desktop views.
  • UI Improvements

    • Refined favourites cards and table layouts for clearer metadata and responsive display.
    • Improved focus styling and touch-friendly selection on mobile.
    • Adjusted table density and column visibility across screen sizes.

Redesign the favourites command library for a cleaner, more polished
look that adapts across every screen size.

- Table: switch to a fixed layout so titles get the remaining width
  (no more over-eager truncation) and the Open action is always visible
  instead of scrolling off-screen. Add pinned markers, per-row type icon
  tiles (shown when there's room), a refined toolbar/header band, and even
  row heights via reliable single-line clamping.
- Wide screens: reveal the leading icon and the secondary Evidence column
  only at 2xl, and collapse both when the item workspace panel is open so
  the browse list stays readable in the three-pane view. Widen the content
  cap on large screens.
- Small screens: add a horizontally scrollable quick-views rail (All /
  Source-backed / Pinned / Recently used) and move the saved-sets carousel
  above the list, restoring the hidden sidebar's navigation below lg.
- Mobile cards: more compact and scannable with a type icon, pinned marker,
  and inline set / last-used metadata, while keeping the independent
  select / open / more-actions touch targets.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012KBhUhayLK1RNqT2Vwopp1
@coderabbitai

coderabbitai Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 58043302-3927-4e9c-bbc6-cbc39cf5aef9

📥 Commits

Reviewing files that changed from the base of the PR and between 31d3a54 and c09f74e.

📒 Files selected for processing (2)
  • src/components/clinical-dashboard/favourites-command-library-page.tsx
  • src/components/clinical-dashboard/favourites-library-nav.tsx

📝 Walkthrough

Walkthrough

The favourites command library adds mobile quick-view chips, revises mobile card selection and metadata presentation, and updates the desktop table for responsive density, column visibility, pinned indicators, and empty states.

Changes

Favourites command library UI

Layer / File(s) Summary
Mobile quick-view navigation
src/components/clinical-dashboard/favourites-library-nav.tsx, src/components/clinical-dashboard/favourites-command-library-page.tsx
Adds mobile chips for All, Source-backed, Pinned, and Recently used views, wires selection handlers, and removes the duplicate browse rail placement.
Mobile favourite card presentation
src/components/clinical-dashboard/favourites-command-library-page.tsx
Adds full-card selection behavior, revised metadata layout, pinned indicators, and active icon tile styling.
Responsive desktop favourites table
src/components/clinical-dashboard/favourites-command-library-page.tsx
Introduces compact table rendering, updated column sizing and visibility, pinned indicators, and revised empty-state colspan behavior.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant FavouritesMobileQuickViews
  participant FavouritesCommandLibraryPage
  User->>FavouritesMobileQuickViews: Select a quick-view chip
  FavouritesMobileQuickViews->>FavouritesCommandLibraryPage: Invoke view or set selection handler
  FavouritesCommandLibraryPage->>FavouritesMobileQuickViews: Render updated active state
Loading

Possibly related PRs

Suggested reviewers: claude

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title clearly summarizes the main UI redesign and responsiveness work in the favourites command library.
Description check ✅ Passed The description covers summary, verification, risk, governance, and notes, with only minor template deviations.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/favourites-page-redesign-trqghq

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.


Comment @coderabbitai help to get the list of available commands.

@BigSimmo
BigSimmo marked this pull request as ready for review July 17, 2026 19:58
@BigSimmo
BigSimmo enabled auto-merge July 17, 2026 19:58

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/clinical-dashboard/favourites-command-library-page.tsx`:
- Around line 698-703: Update the Evidence cell rendering around item.evidence
so the ShieldCheck icon and clinical-accent styling are applied only when
isSourceBacked(item.evidence) is true. Preserve the existing evidence text for
values such as “Run” and “Saved query,” but render those values without
source-backed treatment.

In `@src/components/clinical-dashboard/favourites-library-nav.tsx`:
- Around line 463-469: Update the quick-view chip button styling in the
favourites library navigation to replace the h-10 height utility with the
existing h-tap utility, preserving all other classes and behavior.
🪄 Autofix (Beta)

✅ Autofix completed


ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 70075375-a52b-4951-9d29-e100b4938e8c

📥 Commits

Reviewing files that changed from the base of the PR and between 85ae254 and 31d3a54.

📒 Files selected for processing (2)
  • src/components/clinical-dashboard/favourites-command-library-page.tsx
  • src/components/clinical-dashboard/favourites-library-nav.tsx

Comment thread src/components/clinical-dashboard/favourites-library-nav.tsx Outdated
@coderabbitai

coderabbitai Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Note

Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

Fixes Applied Successfully

Fixed 2 file(s) based on 2 unresolved review comments.

Files modified:

  • src/components/clinical-dashboard/favourites-command-library-page.tsx
  • src/components/clinical-dashboard/favourites-library-nav.tsx

Commit: 2ef16ea89c382738defb4f6b0c335241bb76d6b4

The changes have been pushed to the claude/favourites-page-redesign-trqghq branch.

Time taken: 3m 3s

coderabbitai Bot and others added 2 commits July 17, 2026 20:09
Fixed 2 file(s) based on 2 unresolved review comments.

Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
@supabase

supabase Bot commented Jul 18, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@BigSimmo BigSimmo closed this Jul 18, 2026
@BigSimmo
BigSimmo deleted the claude/favourites-page-redesign-trqghq branch July 18, 2026 18:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants